import Cookie from 'js-cookie'
export default {
  state: {
    menu: [],
    isCollapse: false,
    currentMenu: null,
    tabList: [
      {
        path: '/',
        name: 'home',
        label: '首页',
        icon: 'home',
      },
    ],
  },
  mutations: {
    // 登录后要把后台返回的权限菜单保存到Vuex中的menu中，同时在cookie中也保存一份
    setMenu(state, val) {
      state.menu = val
      Cookie.set('menu', JSON.stringify(val))
      // console.log(val)
    },
    clearMenu(state) {
      state.menu = []
      Cookie.remove('menu')
    },
    addMenu(state, router) {
      if (!Cookie.get('menu')) {
        return
      }
      let menu = JSON.parse(Cookie.get('menu'))
      state.menu = menu
      let currentMenu = [
        {
          path: '/',
          component: () => import(`@/views/Main`),
          children: [],
        },
      ]
      // console.log(menu)
      menu.forEach((item) => {
        if (item.children) {
          item.children = item.children.map((item) => {
            item.component = () => import(`@/views/${item.url}`)
            return item
          })
          // console.log(item)
          // 把遍历好的子路由展开放入第一级路由的子目录中，我们只保存子目录
          currentMenu[0].children.push(...item.children)
        } else {
          item.component = () => import(`@/views/${item.url}`)
          currentMenu[0].children.push(item)
        }
      })
      console.log(currentMenu)
      // 通过router.addRoutes(currentMenu) 可以把拼接好的动态路由放入路由表中
      // 接下来需要考虑这个addMenu方法的调用时机了，1：在登录的时候，2：页面刷新的时候，在main.js中
      // router.addRoutes(array)方法已经废弃了 改位使用 router.addRoute({}) 添加一个对象方法
      router.addRoute(currentMenu[0])
    },
    selectMenu(state, val) {
      if (val.name !== 'home') {
        state.currentMenu = val
        let result = state.tabList.findIndex((item) => item.name === val.name)
        result === -1 ? state.tabList.push(val) : ''
      } else {
        state.currentMenu = null
      }
    },
    closeTab(state, val) {
      let result = state.tabList.findIndex((item) => item.name === val.name)
      state.tabList.splice(result, 1) // slice 是用来截取的，splice 是用来做删除，插入，替换的
    },
    changeCollapse(state) {
      state.isCollapse = !state.isCollapse
    },
  },
  actions: {},
}
